<template>
  <div v-if="!qrcodeSrc" class="power">
    <div class="power-head">
      <h3>{{ powerInfo.name }}</h3>
      <p>￥{{ powerInfo.price }}</p>
    </div>
    <div class="html-con" v-html="powerInfo.content"></div>
    <span class="onPay" @click="onPay">立即报名</span> 
  </div>
  <div v-else-if="qrcodeSrc" class="power2">
    <p>请添加客服进行VIP一对一的恋爱咨询吧</p>
    <img :src="qrcodeSrc" alt="">
  </div>
</template>
<script>
import { getPower, getIsPower } from '@/api/user'
import { wechatPay2, getConsultant } from '@/api/project'
export default {
  data() {
    return {
      powerInfo: {},
      t: this.$route.query.t,
      qrcodeSrc: ''
    }
  },
  created() {
    this.getPower()
  },
  methods: {
    getPower() {
      const { t } = this
      getPower({ t }).then(res => {
        this.powerInfo = res.data
        getIsPower(res.data.id).then(res => {
          if (res.isBuyProject) {
            this.payResolve()
          }
        })
      })
    },
    onPay() {
      const { t, powerInfo } = this
      wechatPay2(powerInfo.id, { t }).then(res => {
        this.onBridgeReady(res.data)
      })
    },
    onBridgeReady(options){
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', options,
        res => {
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            this.payResolve()
          } else {
            alert('报名失败')
          }
      });
    },
    getConsultant() {
      getConsultant().then(res => {
        this.qrcodeSrc = res.data
      })
    },
    payResolve() {
      if (this.t == 2) {
        this.getConsultant()
      } else {
        this.$router.replace('/pay')
      }
    }
  },
}
</script>
<style lang="less" scoped>
.power{
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
}
.onPay{
  position: fixed;
  bottom: 0;
  left: 0;
  display: block;
  height: .5rem;
  width: 100%;
  background: #0050b3;
  text-align: center;
  line-height: .5rem;
  font-size: .16rem;
  color: #fff;
}

.power-head{
  padding: .1rem .2rem;
  h3{
    font-size: .18rem;
  }
  p{
    font-size: .13rem;
    text-align: right;  
    color: #a8071a;
  }
}
.power2{
  padding: .3rem;
  width: 100vw;
  box-sizing: border-box;
  p{
    font-size: .13rem;
  }
  img{
    display: block;
    width: 100%;
  }
}
</style>
<style>
.html-con img{
  max-width: 100%;
}
</style>

